<template>
  <div class="gerenziliao">
    <div class="gerenziliao-shang">
      <van-icon name="arrow-left" @click="backUp" />
      <div>
        健康档案
      </div>
      <div></div>
    </div>
    <div class="gerenziliao-xia">
      <span class="gerenziliao-xia-bi">以下为必填项</span>
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="名称" label="名称" placeholder="请输入名称"
          :rules="[{ required: true, message: '请输入名称' }]" />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-form>
      <span>以下为选填项</span>
      <van-form @submit="onSubmit">
        <van-field v-model="phone" name="手机号" label="手机号" placeholder="请输入手机号" />
        <van-field v-model="sfzh" name="身份证" label="身份证" placeholder="请输入身份证" />
        <van-field v-model="shengao" name="身高" label="身高" placeholder="请输入身高" />
        <van-field v-model="tizhong" name="体重" label="体重" placeholder="请输入体重" />
        <van-field v-model="yaowei" name="腰围" label="腰围" placeholder="请输入腰围" />
      </van-form>
      <span></span>
      <div class="box">
        <div v-for="(item,index) in arr" :key="index" class="list">
          <div>{{item.title}}</div>
          <i v-for="(ite,ind) in item.tagList" :key="ind">{{ite}}</i>
        </div>
      </div>
      <van-button type="info" size="large" round>提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      radio: '1',
      sfzh: "",
      shengao: "",
      tizhong: "",
      yaowei: "",
      phone: "",
      arr: [{
        title: "饮酒习惯",
        only: true,
        active: [],
        tagList: ["无饮酒", "少量", "嗜酒"]
      }, {
        title: "肝功能",
        only: true,
        active: [],
        tagList: ["肝功能正常", "肝功能异常"]
      }, {
        title: "肾功能",
        only: true,
        active: [],
        tagList: ["肾功能正常", "肾功能异常"]
      }, {
        title: "婚姻状况",
        only: true,
        active: [],
        tagList: ["已婚", "未婚", "离异"]
      }, {
        title: "生育状况",
        only: true,
        active: [],
        tagList: ["未生育", "备孕期", "怀孕中", "已生育"]
      }, {
        title: "疾病史",
        only: false,
        active: [],
        tagList: ["高血压", "糖尿病", "心脏病", "过敏性疾病", "哮喘", "白癜风", "癫痫"]
      }]
    };
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values);
    },
    backUp () {
      location.href = "/homeIndex/personal"
    }
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.gerenziliao {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.gerenziliao-shang {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  font-size: 18px;
  align-items: center;
}
.gerenziliao-xia {
  flex: 1;
  background: red;
  background: #f5f5f5;
  overflow: auto;
}
.gerenziliao-xia span {
  font-size: 12px;
  width: 100%;
  padding: 10px;
  /* padding: 0.1rem; */
  /* display: block; */
}
.gerenziliao-xia-bi::before {
  content: "*";
}
.box {
  width: 100%;
  background: white;
  padding-bottom: 16px;
}
.list {
  padding: 0.1rem 0;
  margin: 0 0.1rem;
  border-bottom: 1px solid #f5f5f5;
}
.list div {
  margin-bottom: 20px;
}
.list i {
  display: inline-block;
  font-size: 12px;
  padding: 10px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: #f1f1f1;
  color: #656565;
  text-align: center;
}
</style>